/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:吕艳阳
 */

import React, {useCallback} from 'react';
import {Form, Input, Modal, Spin} from 'antd';
import styles from '@/utils/utils.less'
import config from '@/config';
import DicSelect from '@/components/Dic/DicSelect';
import {ParamModel} from '../data';
import service from "../service";
import {DicValueType, EditDialogProps} from "@/global";
import {FormInstance} from "antd/lib/form";
import EditModalFooter from "@/lib/EditModalFooter";
import useEditModalFooter from "@/hooks/useEditModalFooter";
import useLoad from "@/hooks/useLoad";
import useForm from "@/hooks/useForm";
import useSave from "@/hooks/useSave";
import {Store} from "rc-field-form/lib/interface";

const FormItem = Form.Item;
const TextArea = Input.TextArea;

/** 表单布局 */
const formLayout = {
  labelCol: {span: 6},//7
  wrapperCol: {span: 15},//13
};

/** 系统参数编辑表单组件 */
const Edit: React.FC<EditDialogProps> = props => {
  const {params: {created, newModel={}, id, onSubmitSucess}, visible, hide} = props;
  const {form, bind, reset, submit} = useForm();
  const {loading: dataLoading, data: model} = useLoad<ParamModel>({
    isLoad: Boolean(id),
    isClear: false,
    defaultData: newModel,
    onLoad: () => service.selectById(id),
    onSuccess: bind,
  }, [id]);
  const {finishCallback, ...footerProps} = useEditModalFooter({created, reset, hide, onSubmitSucess});
  const {submitLoading, save} = useSave<ParamModel>({created, onSave: service.save,});

  //新建时数据初始化代码
  //表单提交事件
  const onFinish = useCallback((values: any) => {
    save(model, values, finishCallback);
  }, [model]);

  return (
    <Modal
      title={created ? '新建系统参数' : '编辑系统参数'}
      visible={visible}
      width={700}
      destroyOnClose
      maskClosable={false}
      onCancel={hide}
      footer={(
        <EditModalFooter
          {...footerProps}
          okLoading={dataLoading || submitLoading}
          onOk={submit}
          onCancel={hide}/>
      )}
    >
      <Spin spinning={dataLoading || submitLoading} wrapperClassName={styles.h100p}>
        {model && (<EditForm {...{created, model, form, onFinish}}/>)}
      </Spin>
    </Modal>
  );
};

/** 表单组件 */
function EditForm(props: { created: boolean, model: ParamModel, form: FormInstance, onFinish: (values: Store) => void }) {
  const {model, form, onFinish} = props;
  return (
    <Form form={form} onFinish={onFinish} initialValues={model} {...formLayout}>
      <FormItem
        name="name"
        label="参数名称"
        rules={[{required: true, message: '请输入参数名称'}]}
      >
        <Input maxLength={100}/>
      </FormItem>
      <FormItem
        name="code"
        label="参数编码"
        rules={[{required: true, message: '请输入参数编码'}]}
      >
        <Input maxLength={100}/>
      </FormItem>
      <FormItem
        name="category"
        label="参数分类"
        rules={[{required: true, message: '请选择参数分类'}]}
      >
        <DicSelect
          allowClear
          getPopupContainer={triggerNode => triggerNode.parentElement}
          dicValueType={DicValueType.number}
          dicCode={config.dics.sysParamCategory}
        />
      </FormItem>
      <FormItem
        name="value"
        label="参数值"
      >
        <TextArea rows={3} maxLength={1500} className={styles.verticalResize}/>
      </FormItem>
      <FormItem
        name="remark"
        label="备注"
      >
        <TextArea rows={3} maxLength={500} className={styles.verticalResize}/>
      </FormItem>
    </Form>
  );
}

export default React.memo(Edit);
